<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
  <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/kindeditor/kindeditor.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" action="" lay-filter="updateFormFilter">
  <input type="hidden" name="id"/>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block">
      <select id="typeId" name="role" lay-filter="role">
        <option value="">请选择</option>
        <option value="1">超级管理员</option>
        <option value="2">普通管理员</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
  layui.use(['form', 'upload'], function () {
    var form = layui.form;

    //拿到user_list.jsp传递过来的参数
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    var id = urlParams.get("id");

    $.post(
        '/user/selectById',
        {'id': id},
        function (result) {
          if (result.code == 0) {
            form.val('updateFormFilter', result.data);
          }
        },
        'json'
    );

    // 绑定提交事件
    form.on('submit(submit)', function (data) {
      var field = data.field; // 获取表单字段值
      console.log(data);
      // 此处可执行 Ajax 等操作
      $.post(
          '/user/update',
          field,  //{name: 'zhyangsan', address: 'fdfd', time: 'fd'}
          function (result) {
            console.log(result);
            if (result.code == 0) {
              mylayer.okMsg(result.msg);
              //layer.close(index);
              //table.reload('tableId');
              setInterval(function() {
                //关闭弹出框
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                //刷新父页面
                window.parent.location.reload();
              }, 2000)
            } else {
              mylayer.errorMsg(result.msg);
            }
          },
          'json'
      );
      return false; // 阻止默认 form 跳转
    });
  });
</script>
</body>
</html>